<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>LESS | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="LESS1.LESS是什么LESS是一种动态样式语言。 LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 2.基本用法1.变量12@border-color:#fff;div&amp;#123;border:1px solid @bor">
<meta name="keywords" content="CSS">
<meta property="og:type" content="article">
<meta property="og:title" content="LESS">
<meta property="og:url" content="https://storm4542.github.io/archives/e523796b.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="LESS1.LESS是什么LESS是一种动态样式语言。 LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 2.基本用法1.变量12@border-color:#fff;div&amp;#123;border:1px solid @bor">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.163Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="LESS">
<meta name="twitter:description" content="LESS1.LESS是什么LESS是一种动态样式语言。 LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。 2.基本用法1.变量12@border-color:#fff;div&amp;#123;border:1px solid @bor">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-LESS" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      LESS
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T08:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h3 id="LESS"><a href="#LESS" class="headerlink" title="LESS"></a>LESS</h3><h4 id="1-LESS是什么"><a href="#1-LESS是什么" class="headerlink" title="1.LESS是什么"></a>1.LESS是什么</h4><p>LESS是一种<strong>动态</strong>样式语言。</p>
<p>LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承，运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。</p>
<h4 id="2-基本用法"><a href="#2-基本用法" class="headerlink" title="2.基本用法"></a>2.基本用法</h4><h5 id="1-变量"><a href="#1-变量" class="headerlink" title="1.变量"></a>1.变量</h5><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@border-color:</span><span class="number">#fff</span>;</span><br><span class="line"><span class="selector-tag">div</span>&#123;<span class="attribute">border</span>:<span class="number">1px</span> solid <span class="variable">@border-color</span>&#125;</span><br></pre></td></tr></table></figure>
<h5 id="2-混合"><a href="#2-混合" class="headerlink" title="2.混合"></a>2.混合</h5><p>混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.classA</span> (<span class="variable">@radius</span>:<span class="number">5px</span>)&#123;<span class="attribute">border-radius</span>:<span class="variable">@radius</span>&#125;</span><br><span class="line"><span class="selector-class">.classB</span> &#123;<span class="selector-class">.classA</span>&#125;</span><br><span class="line"><span class="selector-class">.classC</span> &#123;<span class="selector-class">.classA</span>(<span class="number">10px</span>)&#125;</span><br></pre></td></tr></table></figure>
<p>@arguments变量 像写函数一样写CSS , 理解为JS里的 arguments 即可</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.box-shadow</span>(<span class="variable">@x</span>:<span class="number">0</span> , <span class="variable">@y</span>:<span class="number">0</span> , <span class="variable">@blur</span>:<span class="number">1px</span>, <span class="variable">@color</span>:<span class="number">#666</span>)&#123;</span><br><span class="line">    <span class="attribute">box-shadow</span>:<span class="variable">@arguments</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.box-shadow</span>(<span class="number">1px</span>,<span class="number">2px</span>);  <span class="comment">// '调用函数'的感觉</span></span><br><span class="line"><span class="selector-class">.box-shadow</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">2px</span>,<span class="number">#888</span>)</span><br></pre></td></tr></table></figure>
<h5 id="3-嵌套"><a href="#3-嵌套" class="headerlink" title="3.嵌套"></a>3.嵌套</h5><p><strong>最常用的</strong></p>
<p>我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。(&amp;表示当前元素)</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.Parent</span>&#123;</span><br><span class="line">    <span class="attribute">font-size</span>:<span class="number">12px</span>;</span><br><span class="line">    &gt; <span class="selector-tag">h1</span>&#123; <span class="attribute">font-size </span>: inherit&#125;</span><br><span class="line">    &gt; <span class="selector-tag">input</span> &#123; </span><br><span class="line">        <span class="attribute">color</span>: black;</span><br><span class="line">        <span class="selector-tag">&amp;</span><span class="selector-pseudo">:hover</span>&#123; <span class="attribute">color</span>: red&#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="4-函数-amp-amp-运算"><a href="#4-函数-amp-amp-运算" class="headerlink" title="4.函数&amp;&amp;运算"></a>4.函数&amp;&amp;运算</h5><p>运算提供了加，减，乘，除操作；我们可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，如果你愿意的话可以操作属性值。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="variable">@the-border:</span> <span class="number">1px</span>;</span><br><span class="line"><span class="variable">@base-color:</span> <span class="number">#111</span>;</span><br><span class="line"><span class="variable">@red:</span> <span class="number">#842210</span>;</span><br><span class="line"><span class="selector-id">#header</span> &#123;</span><br><span class="line">  <span class="attribute">color</span>: <span class="variable">@base-color</span> * <span class="number">3</span>;</span><br><span class="line">  <span class="attribute">border-left</span>: <span class="variable">@the-border</span>;</span><br><span class="line">  <span class="attribute">border-right</span>: <span class="variable">@the-border</span> * <span class="number">2</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-id">#footer</span> &#123; </span><br><span class="line">  <span class="attribute">color</span>: <span class="variable">@base-color</span> + <span class="number">#003300</span>;</span><br><span class="line">  <span class="attribute">border-color</span>: desaturate(<span class="variable">@red</span>, <span class="number">10%</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="5-引导"><a href="#5-引导" class="headerlink" title="5.引导"></a>5.引导</h5><p>当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。</p>
<p>为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。</p>
<figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//匹配模式和引导表达式</span></span><br><span class="line"><span class="selector-class">.min</span>(drak,<span class="variable">@color</span>)&#123;</span><br><span class="line">    <span class="attribute">color</span>: darken(<span class="variable">@color</span>,<span class="number">20%</span>);</span><br><span class="line">    <span class="comment">//将颜色加深20%</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.min</span>(light,<span class="variable">@color</span>)&#123;</span><br><span class="line">    <span class="attribute">color</span>: lighten(<span class="variable">@color</span>,<span class="number">20%</span>);</span><br><span class="line">    <span class="comment">//将颜色变浅20%</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.min</span>(<span class="variable">@_</span>,<span class="variable">@color</span>)&#123;</span><br><span class="line">    <span class="attribute">display</span>: block;</span><br><span class="line">&#125;</span><br><span class="line"><span class="variable">@switch1:</span>drak;</span><br><span class="line"><span class="variable">@switch2:</span>light;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">span</span>&#123;</span><br><span class="line">    <span class="comment">//.min(@switch1,#ddd);</span></span><br><span class="line">    <span class="comment">//.min(drak,#ddd);@color:#ddd</span></span><br><span class="line">    <span class="comment">//.min(@switch2,#ddd);</span></span><br><span class="line">    <span class="comment">//@_,接受任意值，你传什么值他都会执行；</span></span><br><span class="line">    <span class="selector-class">.min</span>(<span class="variable">@word</span>,<span class="number">#ccc</span>);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*---------------------------------*/</span></span><br><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@a</span>)&#123;</span><br><span class="line">    <span class="attribute">color</span>:<span class="variable">@a</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">/*@a的color亮度大于50%的话*/</span></span><br><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@a</span>) <span class="keyword">when</span> (lightness(<span class="variable">@a</span>)&gt;=<span class="number">50%</span>)&#123; </span><br><span class="line">    <span class="attribute">background-color</span>:black</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.mixin</span>(<span class="variable">@a</span>) <span class="keyword">when</span> (lightness(<span class="variable">@a</span>)&lt;<span class="number">50%</span>)&#123;</span><br><span class="line">    <span class="attribute">background-color</span>:white</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-class">.classA</span>&#123;<span class="selector-class">.mixin</span>(<span class="number">#ddd</span>)&#125;</span><br><span class="line"><span class="selector-class">.classB</span>&#123;<span class="selector-class">.mixin</span>(<span class="number">#555</span>)&#125;</span><br><span class="line"><span class="comment">//注释</span></span><br><span class="line"><span class="comment">/*</span></span><br><span class="line"><span class="comment"> 注释</span></span><br><span class="line"><span class="comment"> * color函数</span></span><br><span class="line"><span class="comment"> * 1. lighten(@color,10%):</span></span><br><span class="line"><span class="comment"> * 意思：return a color which is 10% lighter than @color</span></span><br><span class="line"><span class="comment"> * 2. darken(@color,10%);</span></span><br><span class="line"><span class="comment"> * 意思：return a color which is 10% draker than @color</span></span><br><span class="line"><span class="comment"> * 3. statuate(@color,10%);//增加饱和度</span></span><br><span class="line"><span class="comment"> * 意思：return a color which is 10% statuated than @color</span></span><br><span class="line"><span class="comment"> * 4. destatuste(@color,10%);//减少饱和度，褪色</span></span><br><span class="line"><span class="comment"> * 5. fadein(@color,10%)</span></span><br><span class="line"><span class="comment"> * 6. fadeout(@color,10%)</span></span><br><span class="line"><span class="comment"> * 7. fade(@color,50%)</span></span><br><span class="line"><span class="comment"> * 8. spin(@color,10)</span></span><br><span class="line"><span class="comment"> * 9. spin(@color,-10)</span></span><br><span class="line"><span class="comment"> * 10. mix(@color1,@color2);混合</span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * </span></span><br><span class="line"><span class="comment"> * 提取颜色信息</span></span><br><span class="line"><span class="comment"> * hue(@color):返回当前颜色的色调</span></span><br><span class="line"><span class="comment"> * staturation(@color):返回当前颜色的饱和度</span></span><br><span class="line"><span class="comment"> * lightness(@color):返回当前颜色的亮度(浅的度数)</span></span><br><span class="line"><span class="comment"> * */</span></span><br></pre></td></tr></table></figure>
<p>得到</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.classA</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: black;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#ddd</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="selector-class">.classB</span> &#123;</span><br><span class="line">  <span class="attribute">background-color</span>: white;</span><br><span class="line">  <span class="attribute">color</span>: <span class="number">#555</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="6-计算功能"><a href="#6-计算功能" class="headerlink" title="6.计算功能"></a>6.计算功能</h5><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//计算功能：任何颜色，变量都可以参与运算</span></span><br><span class="line"><span class="variable">@base:</span><span class="number">5%</span>;</span><br><span class="line"><span class="variable">@filter:</span><span class="variable">@base</span>*<span class="number">2</span>;<span class="comment">//10%</span></span><br><span class="line"><span class="variable">@other:</span><span class="variable">@base</span>*<span class="number">4</span>+<span class="variable">@filter</span>;<span class="comment">//30%</span></span><br><span class="line"><span class="selector-class">.box</span>&#123;</span><br><span class="line">    <span class="attribute">color</span>: <span class="number">#FFFF00</span>;</span><br><span class="line">    <span class="attribute">background-color</span>: <span class="variable">@filter</span>+<span class="number">#111</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100%</span>/<span class="number">2</span>+<span class="variable">@other</span>;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="variable">@var:</span><span class="number">10px</span> + <span class="number">5</span>;</span><br><span class="line"><span class="selector-id">#box1</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: (<span class="variable">@var</span> + <span class="number">20</span>)*<span class="number">2</span>;</span><br><span class="line">    <span class="attribute">height</span>: (<span class="variable">@var</span> - <span class="number">5</span>)*<span class="number">3</span>;</span><br><span class="line">    <span class="selector-tag">p</span>&#123;</span><br><span class="line">        <span class="attribute">height</span>: (<span class="variable">@var</span> + <span class="number">5</span>)/<span class="number">2</span>;</span><br><span class="line">        <span class="attribute">background-color</span>: <span class="number">#101010</span>+<span class="number">#000111</span>;</span><br><span class="line">        <span class="attribute">border</span>: <span class="variable">@var</span> - <span class="number">5</span> solid <span class="number">#0000ff</span>;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">//less也支持部分Math函数</span></span><br><span class="line"><span class="comment">//round(1.67)-&gt;2</span></span><br><span class="line"><span class="comment">//ceil(2.1)-&gt;3</span></span><br><span class="line"><span class="comment">//floor(2.9)-&gt;2</span></span><br><span class="line"><span class="comment">//peercentage(0.5)-&gt;50%转为百分数的函数</span></span><br><span class="line"><span class="selector-id">#s</span>&#123;</span><br><span class="line">    <span class="attribute">width</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">height</span>: <span class="number">100px</span>;</span><br><span class="line">    <span class="attribute">border-radius</span>: percentage(<span class="number">0.5</span>);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h5 id="7-Import-amp-amp-字符串插值"><a href="#7-Import-amp-amp-字符串插值" class="headerlink" title="7.Import &amp;&amp; 字符串插值"></a>7.Import &amp;&amp; 字符串插值</h5><figure class="highlight less"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">import 'lib.less'</span><br><span class="line">import 'lib' //可省略后缀名</span><br><span class="line"></span><br><span class="line">import 'lib.css' //引入一个CSS，并且不让LESS对它进行处理</span><br><span class="line"></span><br><span class="line"><span class="variable">@baseURL</span> = <span class="string">'http://storm4542.github.com'</span></span><br><span class="line">body&#123;<span class="attribute">background</span>: url(<span class="string">"@&#123;baseURL&#125;/image/bg.jpg"</span>)&#125;  <span class="comment">//类似JS 的 $&#123;xxx&#125;</span></span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="151aa5a1.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          REM
        
      </div>
    </a>
  
  
    <a href="3e92ca77.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">移动页面开发</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/e523796b.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
